<template>
  <div class="plugin-reports-list" v-loading="reportsStore.page.loading">
    <t-row :gutter="20">
      <t-col :xl="3" :lg="4" :md="6" v-for="(item, i) in reportsStore.getList()" :key="i">
        <div class="bg-box row-box flash" @click="onInfo(item)">
          <div class="more">
            <t-icon name="chevron-right-circle"/>
          </div>
          <div class="name wrap">
            {{ item.time }} {{ plugin.t('form.type_text.' + item.type) }}
          </div>
          <div class="item wrap">
            <span>{{ plugin.t('form.count') }}</span><b>{{ item.count }}</b>
          </div>
          <div class="item wrap">
            <span>{{ plugin.t('form.created_at') }}</span>{{ item.created_at.format() }}
          </div>
          <div class="item wrap">
            <span>{{ plugin.t('form.updated_at') }}</span>{{ item.updated_at.format() }}
          </div>
        </div>
      </t-col>
    </t-row>
    <div class="empty" v-if="!reportsStore.page.loading && !reportsStore.getList().length">
      <t-icon class="empty-icon" name="root-list" />
      <div class="empty-body">{{ plugin.t('empty') }}</div>
    </div>
  </div>
  <t-pagination 
    :current="reportsStore.page.current"
    :total="reportsStore.page.total"
    :pageSize="reportsStore.page.pageSize"
    :showPageSize="reportsStore.page.showPageSize"
    @change="({ current, pageSize }) => reportsStore.reset(current)"
  />
</template>
<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import app from '@/app'
  import index from '../index'
  import reportsStore from '../store'

  const emit = defineEmits([])
  const plugin = index.plugin
  const router = useRouter()

  // 首次请求
  reportsStore.reset(1)

  // 查看报告
  const onInfo = item => {
    router.push('/plugin/reports/' + item.type + '/' + item.time)
  }
</script>
<style lang="scss">
  @import '@/style/global';
  .plugin-reports-list{
    min-height: 300px;

    .empty{
      height: 300px;
      padding: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      &-icon{
        color: $color-body;
        font-size: 50px;
      }
      &-body{
        padding-top: 10px;
        font-size: 14px;
        color: $color-body;
      }
    }

    .row-box{
      cursor: pointer;
      border: 1px solid $color-border;

      &:hover{
        border-color: $color;
      }
    }

    .name{
      color: $color-title;
      font-size: 18px;
      padding: 0 20px 10px 0;
      font-weight: bold;
    }

    .more{
      position: absolute;
      top: 25px;
      right: 20px; 
      color: $color;
      font-size: 20px;
    }

    .item{  
      color: $color-title;
      font-size: 14px;
      line-height: 20px;
      margin-top: 10px;
      span{
        width: 80px;
        display: inline-block;
        color: $color-body;
      }

      b{
        color: $color;
        font-weight: normal;
      }
    }
  }
</style>